<template>
  <el-row :gutter="5" class="flex flex-wrap">
    <!-- 渠道信息 -->
    <el-col :md="4" :lg="4" :xl="4">
      <el-card>
        <div slot="header" class="clearfix relative">
          <span class="title-icon">渠道信息</span>
          <el-button
            size="mini"
            type="info"
            class="header-cancel-btn"
            v-if="isChangeChannelInfo"
            @click="isChangeChannelInfo = false"
            >取消</el-button
          >
          <el-button
            type="success"
            size="mini"
            class="header-save-btn"
            @click="changeChannelInfo"
          >
            {{ isChangeChannelInfo ? "保存" : "编辑" }}
          </el-button>
        </div>

        <el-form
          size="mini"
          label-position="left"
          label-width="90px"
          class="main-text"
          style="height:325px;"
        >
          <!-- <span>目的国家:</span> -->
          <el-form-item prop="countryId">
            <div slot="label">目的国家：</div>
            <el-select
              v-if="isChangeChannelInfo"
              v-model="channelInfo.countryId"
              placeholder="请选择国家"
              clearable
              filterable
            >
              <el-option
                v-for="(k, v) in countryOptions"
                :key="v"
                :label="v"
                :value="parseInt(k)"
              ></el-option>
            </el-select>
            <span v-else>{{
              findKey(channelInfo.countryId + "", countryOptions)
            }}</span>
          </el-form-item>

          <el-form-item prop="inStockChannel">
            <div slot="label">渠道：</div>
            <el-select
              v-if="isChangeChannelInfo"
              v-model="channelInfo.inStockChannel"
              placeholder="请选择渠道"
              clearable
              filterable
            >
              <el-option
                v-for="(k, v) in stockChannelOptions"
                :key="v"
                :label="stockChannelOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
            <span v-else>{{
              stockChannelOptions[channelInfo.inStockChannel]
            }}</span>
          </el-form-item>
          <el-form-item prop="isTaxFarming">
            <div slot="label">包税：</div>
            <el-select
              v-if="isChangeChannelInfo"
              v-model="channelInfo.isTaxFarming"
              placeholder="是否包税"
            >
              <el-option
                v-for="(k, v) in yesNoOptions"
                :key="v"
                :label="yesNoOptions[v]"
                :value="parseInt(v)"
              ></el-option>
            </el-select>
            <span v-else>{{ isNotOptions[channelInfo.isTaxFarming] }}</span>
          </el-form-item>

          <el-form-item prop="customerActualWeight">
            <div slot="label">实重(KGS):</div>
            <el-input
              v-if="isChangeChannelInfo"
              v-model="channelInfo.customerActualWeight"
              clearable
            />
            <span v-else>{{ channelInfo.customerActualWeight }}</span>
          </el-form-item>
          <el-form-item prop="customerVolume">
            <div slot="label">体积(CBM):</div>
            <el-input
              v-if="isChangeChannelInfo"
              v-model="channelInfo.customerVolume"
              clearable
            />
            <span v-else>{{ channelInfo.customerVolume }}</span>
          </el-form-item>

          <el-form-item prop="customerChargedWeight">
            <div slot="label">体积重(KGS):</div>
            <el-input
              v-if="isChangeChannelInfo"
              v-model="channelInfo.customerChargedWeight"
              clearable
            />
            <span v-else>{{ channelInfo.customerChargedWeight }}</span>
          </el-form-item>
          <el-form-item prop="customerTotalPackages" style="height:50px;">
            <div slot="label">件数:</div>
            <el-input
              v-if="isChangeChannelInfo"
              v-model="channelInfo.customerTotalPackages"
              clearable
            />
            <span v-else>{{ channelInfo.customerTotalPackages }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>
    <!-- 入库信息 -->
    <el-col :md="5" :lg="5" :xl="5">
      <el-card>
        <div slot="header" class="clearfix relative">
          <span class="title-icon">入库信息</span>
        </div>

        <el-row class="main-text form-item-text" style="height:325px;">
          <el-col :span="12">
            <span>件数：</span>
          </el-col>
          <el-col :span="12">
            <span>{{ stockInfo.inStockTotalPackages }}</span>
          </el-col>
          <el-col :span="12">
            <span>实重(KGS)：</span>
          </el-col>
          <el-col :span="12">
            <span v-if="stockInfo.inStockActualWeight">{{
              stockInfo.inStockActualWeight.toFixed(2)
            }}</span>
          </el-col>
          <el-col :span="12">
            <span>计费重(KGS/CBM)：</span>
          </el-col>
          <el-col :span="12">
            <span>{{ stockInfo.inStockChargedWeight }}</span>
          </el-col>
          <el-col :span="12">
            <span>体积(CBM)：</span>
          </el-col>
          <el-col :span="12">
            <span v-if="stockInfo.inStockVolume">{{
              stockInfo.inStockVolume.toFixed(3)
            }}</span>
          </el-col>
        </el-row>
      </el-card>
    </el-col>
    <!-- 出库信息 -->
    <el-col :md="5" :lg="5" :xl="5">
      <el-card>
        <div slot="header" class="clearfix relative">
          <span class="title-icon">出库信息</span>
          <el-button
            size="mini"
            type="info"
            class="header-cancel-btn"
            v-if="isChangeOutStockInfo"
            @click="isChangeOutStockInfo = false"
            >取消</el-button
          >
          <el-button
            type="success"
            size="mini"
            class="header-save-btn"
            @click="changeOutOfStockInfo"
          >
            {{ isChangeOutStockInfo ? "保存" : "编辑" }}
          </el-button>
        </div>
        <el-form
          size="mini"
          label-position="left"
          label-width="120px"
          class="main-text"
          style="height:325px;"
        >
          <el-form-item prop="serviceTotalPackages">
            <div slot="label">件数:</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceTotalPackages"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceTotalPackages }}</span>
          </el-form-item>
          <el-form-item prop="serviceActualWeight">
            <div slot="label">实重(KGS):</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceActualWeight"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceActualWeight }}</span>
          </el-form-item>
          <el-form-item prop="serviceChargedWeight">
            <div slot="label">计费重(KGS/CBM):</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceChargedWeight"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceChargedWeight }}</span>
          </el-form-item>
          <el-form-item prop="serviceVolume">
            <div slot="label">体积(CBM):</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceVolume"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceVolume }}</span>
          </el-form-item>
          <el-form-item prop="serviceVolumeWeight">
            <div slot="label">体积重(KGS):</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceVolumeWeight"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceVolumeWeight }}</span>
          </el-form-item>
          <el-form-item prop="serviceUnitPrice">
            <div slot="label">单价:</div>
            <el-input
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceUnitPrice"
              clearable
            />
            <span v-else>{{ outStockInfo.serviceUnitPrice }}</span>
          </el-form-item>
          <el-form-item prop="serviceUnitPriceCurrency">
            <div slot="label">币种:</div>

            <el-select
              v-if="isChangeOutStockInfo"
              v-model="outStockInfo.serviceUnitPriceCurrency"
              placeholder="请选择币种"
              filterable
            >
              <el-option
                v-for="(k, v) in currencyOptions"
                :key="v"
                :label="currencyOptions[v]"
                :value="v"
              ></el-option>
            </el-select>
            <span v-else>{{
              currencyOptions && Object.keys(currencyOptions).length > 0
                ? currencyOptions[outStockInfo.serviceUnitPriceCurrency]
                : ""
            }}</span>
          </el-form-item>
        </el-form>
      </el-card>
    </el-col>

    <!-- 订舱信息 -->
    <el-col :md="10" :lg="10" :xl="10">
      <el-card>
        <div slot="header" class="clearfix relative">
          <span class="title-icon">订舱信息</span>
          <el-button
            size="mini"
            type="info"
            class="header-cancel-btn"
            v-if="isChangeProtInfo"
            @click="isChangeProtInfo = false"
            >取消</el-button
          >
          <el-button
            type="success"
            size="mini"
            class="header-save-btn"
            @click="changeStockInfo"
          >
            {{ isChangeProtInfo ? "保存" : "编辑" }}
          </el-button>
        </div>
        <el-form
          size="mini"
          label-position="left"
          label-width="110px"
          class="main-text"
          style="height:295px;white-space: nowrap;"
        >
          <el-row :gutter="10">
            <el-col :md="12" :lg="8">
              <el-form-item prop="houseNumberSender">
                <div slot="label">M单号:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  type="text"
                  size="mini"
                  v-model.trim="protInfo.masterNumber"
                  :maxlength="50"
                ></el-input>

                <span v-else>{{ protInfo.masterNumber }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="estimatedDepartureTime">
                <div slot="label">预计离港时间:</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  value-format="yyyy-MM-dd"
                  v-model="protInfo.estimatedDepartureTime"
                  type="date"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                >
                  >
                </el-date-picker>

                <span v-else>{{ protInfo.estimatedDepartureTime }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8">
              <el-form-item prop="estimatedArrivalTime">
                <div slot="label">预计到港时间:</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  v-model="protInfo.estimatedArrivalTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>

                <span v-else>{{ protInfo.estimatedArrivalTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="serviceCompanyId">
                <div slot="label">订舱服务商:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.serviceCompanyId"
                  placeholder="请选择订舱服务商"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                  @change="companyIdChange"
                >
                  <el-option
                    v-for="(k, v) in serviceCompanyOptions"
                    :key="v"
                    :label="serviceCompanyOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  serviceCompanyOptions &&
                  Object.keys(serviceCompanyOptions).length > 0
                    ? serviceCompanyOptions[protInfo.serviceCompanyId]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="customsClearanceAgent">
                <div slot="label">清关服务商:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.customsClearanceAgent"
                  placeholder="请选择清关服务商"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in serviceCompanyOptions"
                    :key="v"
                    :label="serviceCompanyOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  serviceCompanyOptions &&
                  Object.keys(serviceCompanyOptions).length > 0
                    ? serviceCompanyOptions[protInfo.customsClearanceAgent]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8">
              <el-form-item prop="afterSendServicer">
                <div slot="label">派送服务商:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.afterSendServicer"
                  placeholder="请选择派送服务商"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in serviceCompanyOptions"
                    :key="v"
                    :label="serviceCompanyOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  serviceCompanyOptions &&
                  Object.keys(serviceCompanyOptions).length > 0
                    ? serviceCompanyOptions[protInfo.afterSendServicer]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8">
              <el-form-item prop="shipmentPort">
                <div slot="label">起运港：</div>

                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.shipmentPort"
                  placeholder="请选择起运港"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in configPortOptions"
                    :key="v"
                    :label="configPortOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  configPortOptions && Object.keys(configPortOptions).length > 0
                    ? configPortOptions[protInfo.shipmentPort]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="departurePortInspectionTime">
                <div slot="label">起运港查验时间：</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  value-format="yyyy-MM-dd"
                  v-model="protInfo.departurePortInspectionTime"
                  type="date"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>

                <span v-else>{{ protInfo.departurePortInspectionTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="departurePortInspectionReason">
                <div slot="label">起运港查验原因：</div>

                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.departurePortInspectionReason"
                  clearable
                />
                <span v-else>{{ protInfo.departurePortInspectionReason }}</span>
              </el-form-item>
            </el-col>

            <!-- <el-col :md="12" :lg="8">
              <el-form-item prop="linkMan">
                <div slot="label">联系人:</div>

                <el-input
                  v-if="isChangeProtInfo"
                  disabled
                  v-model="protInfo.linkMan"
                  clearable
                />
                <span v-else>{{ protInfo.linkMan }}</span>
              </el-form-item>
            </el-col> -->
            <el-col :md="12" :lg="8">
              <el-form-item prop="destinationPort">
                <div slot="label">目的港：</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.destinationPort"
                  placeholder="请选择目的港"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in configPortOptions"
                    :key="v"
                    :label="configPortOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  configPortOptions && Object.keys(configPortOptions).length > 0
                    ? configPortOptions[protInfo.destinationPort]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="arrivalPortInspectionTime">
                <div slot="label">目的港查验时间:</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  v-model="protInfo.arrivalPortInspectionTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>

                <span v-else>{{ protInfo.arrivalPortInspectionTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="arrivalPortInspectionReason">
                <div slot="label">目的港查验原因:</div>

                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.arrivalPortInspectionReason"
                  clearable
                />
                <span v-else>{{ protInfo.arrivalPortInspectionReason }}</span>
              </el-form-item>
            </el-col>

            <!-- <el-col :md="12" :lg="8">
              <el-form-item prop="companyPhone">
                <div slot="label">电话:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  disabled
                  v-model="protInfo.companyPhone"
                  clearable
                />
                <span v-else>{{ protInfo.companyPhone }}</span>
              </el-form-item>
            </el-col> -->
            <el-col :md="12" :lg="8">
              <el-form-item prop="transferPort">
                <div slot="label">中转港:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.transferPort"
                  placeholder="请选择中转港"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in configPortOptions"
                    :key="v"
                    :label="configPortOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  configPortOptions && Object.keys(configPortOptions).length > 0
                    ? configPortOptions[protInfo.transferPort]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="transferPortInspectionTime">
                <div slot="label">中转港查验时间:</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  v-model="protInfo.transferPortInspectionTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>

                <span v-else>{{ protInfo.transferPortInspectionTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="transferPortInspectionReason">
                <div slot="label">中转港查验原因:</div>

                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.transferPortInspectionReason"
                  clearable
                />
                <span v-else>{{ protInfo.transferPortInspectionReason }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :md="12"
              :lg="8"
              v-if="['airFreightHD', 'airFreight'].includes(pageType)"
            >
              <el-form-item prop="shipOrAirlineCompany">
                <div slot="label">航空公司:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.shipOrAirlineCompany"
                  placeholder="请选择航空公司"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in airlineOptions"
                    :key="v"
                    :label="airlineOptions[v]"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else @click="gotoNetAddress">{{
                  airlineOptions && Object.keys(airlineOptions).length > 0
                    ? airlineOptions[protInfo.shipOrAirlineCompany]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :md="12"
              :lg="8"
              v-if="['airFreightHD', 'airFreight'].includes(pageType)"
            >
              <el-form-item prop="flightNumber">
                <div slot="label">航班号:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.flightNumber"
                  clearable
                />
                <span v-else>{{ protInfo.flightNumber }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :md="12"
              :lg="8"
              v-if="['seaFreightHD', 'seaFreight'].includes(pageType)"
            >
              <el-form-item prop="shipOrAirlineCompany">
                <div slot="label">船公司:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.shipOrAirlineCompany"
                  placeholder="请选择船公司"
                  filterable
                  clearable
                  :style="{ width: '100%' }"
                >
                  <el-option
                    v-for="(k, v) in configShipOptions"
                    :key="v"
                    :label="k"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else @click="gotoNetAddress">{{
                  configShipOptions && Object.keys(configShipOptions).length > 0
                    ? configShipOptions[protInfo.shipOrAirlineCompany]
                    : ""
                }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :md="12"
              :lg="8"
              v-if="['seaFreightHD', 'seaFreight'].includes(pageType)"
            >
              <el-form-item prop="bigShip">
                <div slot="label">大船船只:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.bigShip"
                  clearable
                />

                <span v-else>{{ protInfo.bigShip }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :md="12"
              :lg="8"
              v-if="['seaFreightHD', 'seaFreight'].includes(pageType)"
            >
              <el-form-item prop="shipFlights">
                <div slot="label">大船航次:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.shipFlights"
                  clearable
                />

                <span v-else>{{ protInfo.shipFlights }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" v-if="pageType === 'seaFreight'">
              <el-form-item prop="shipFlights">
                <div slot="label">船只IMO:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.shipImo"
                  clearable
                />

                <span v-else>{{ protInfo.shipImo }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8" v-if="pageType === 'seaFreightHD'">
              <el-form-item prop="wharfName">
                <div slot="label">码头名称:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.wharfName"
                  clearable
                />

                <span v-else>{{ protInfo.shipImo }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :md="12"
              :lg="8"
              v-if="['seaFreightHD', 'seaFreight'].includes(pageType)"
            >
              <el-form-item prop="deliveryType">
                <div slot="label">派送方式:</div>
                <el-select
                  v-if="isChangeProtInfo"
                  v-model="protInfo.deliveryType"
                  placeholder="请选择派送方式"
                  clearable
                  :style="{ width: '100%' }"
                  filterable
                >
                  <el-option
                    v-for="(k, v) in deliveryTypeOptions"
                    :key="k"
                    :label="m(k)"
                    :value="parseInt(v)"
                  ></el-option>
                </el-select>

                <span v-else>{{
                  m(deliveryTypeOptions[protInfo.deliveryType])
                }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :md="12"
              :lg="8"
              v-if="['airFreightHD', 'airFreight'].includes(pageType)"
            >
              <el-form-item prop="portOfDestinationWay">
                <div slot="label">目的港提货方式:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.portOfDestinationWay"
                  clearable
                />

                <span v-else>{{ protInfo.portOfDestinationWay }}</span>
              </el-form-item>
            </el-col>

            <el-col
              :md="12"
              :lg="8"
              v-if="['airFreightHD', 'airFreight'].includes(pageType)"
            >
              <el-form-item prop="boardNo">
                <div slot="label">板号:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.boardNo"
                  clearable
                />

                <span v-else>{{ protInfo.boardNo }}</span>
              </el-form-item>
            </el-col>
            <el-col
              :md="12"
              :lg="8"
              v-if="['airFreightHD', 'airFreight'].includes(pageType)"
            >
              <el-form-item prop="fileNo">
                <div slot="label">文件编号:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.fileNo"
                  clearable
                />

                <span v-else>{{ protInfo.fileNo }}</span>
              </el-form-item>
            </el-col>

            <el-col :md="12" :lg="8" v-if="pageType === 'airFreightHD'">
              <el-form-item prop="flightNumber">
                <div slot="label">最后免仓期(LFD):</div>
                <el-date-picker
                  v-if="isChangeProtInfo"
                  v-model="protInfo.lastFreeDayTime"
                  type="date"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  placeholder="选择日期"
                  :style="{ width: '100%' }"
                  :picker-options="pickerOptions"
                >
                  >
                </el-date-picker>
                <span v-else>{{ protInfo.lastFreeDayTime }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="12" :lg="8">
              <el-form-item prop="dutyNo">
                <div slot="label">Entry No:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  v-model="protInfo.dutyNo"
                  clearable
                />

                <span v-else>{{ protInfo.dutyNo }}</span>
              </el-form-item>
            </el-col>
            <el-col :md="24" :lg="24">
              <el-form-item prop="customerRemark">
                <div slot="label">内部备注1:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  type="textarea"
                  v-model="protInfo.customerRemark"
                  clearable
                />
                <p style="white-space: normal;" v-else>
                  {{ protInfo.customerRemark }}
                </p>
              </el-form-item>
            </el-col>
            <el-col :md="24" :lg="24">
              <el-form-item prop="customerRemark2">
                <div slot="label">内部备注2:</div>
                <el-input
                  v-if="isChangeProtInfo"
                  type="textarea"
                  v-model="protInfo.customerRemark2"
                  clearable
                />
                <p style="white-space: normal;" v-else>
                  {{ protInfo.customerRemark2 }}
                </p>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { ajax } from "@/store/yg/common/utils";
import * as constant from "@/store/yg/common/constant";
import axios from "axios";
import { m } from "@/store/yg/common/local";

export default {
  props: {
    pageType: {
      type: String,
      required: true
    },
    initOptionsData: {
      type: Object,
      default: function() {
        return {};
      }
    },
    waybillData: {},
    whetherSynchronize: {
      type: Boolean
    }
  },
  data() {
    return {
      stockInfo: {
        id: 0,
        inStockActualWeight: 12, //实重
        inStockVolume: 12, //入库体积
        inStockChargedWeight: 12, // 入库计费重
        inStockTotalPackages: 12, //入库件数
        inStockOperationId: "Jack" // 入库操作人
      },
      waybillId: 0,
      palceOrderWayOptions: {
        0: "清关+派送",
        1: "清关",
        2: "快递派送",
        3: "卡车派送"
      },
      shippingway: 0,
      isChangeChannelInfo: false,
      isChangeOutStockInfo: false,
      isChangeProtInfo: false,
      channelInfo: {
        countryId: 1,
        inStockChannel: 1,
        isTaxFarming: 1
      },
      outStockInfo: {},
      isNotOptions: {
        1: "是",
        0: "否"
      },

      yesNoOptions: {
        1: "是",
        0: "否"
      },
      protInfo: {
        estimatedDepartureTime: ""
      },
      //渠道下拉
      stockChannelOptions: {},
      //国家下拉
      countryOptions: {},
      //港口下拉
      configPortOptions: {},
      //航空公司下拉
      airlineOptions: {},
      //船公司
      configShipOptions: {},
      //服务商
      serviceCompanyOptions: {},
      //币种
      currencyOptions: {},
      // 用户下拉
      userOptions: {},
      //派送方式下拉
      deliveryTypeOptions: {},
      pickerOptions: {
        // disabledDate(time) {
        //   return time.getTime() > Date.now();
        // },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  mounted() {
    this.waybillId = this.$route.query.waybillId;
    this.shippingway = this.$route.query.shippingway;
    this.initParams();
    this.initOptions();
    this.companyIdChange();
  },
  watch: {
    initOptionsData: {
      handler(newVal, oldVal) {
        if (newVal && newVal != undefined && null != newVal) {
          this.airlineOptions = newVal.airlineMap;
          if (["airFreightHD", "airFreight"].includes(this.pageType)) {
            this.configPortOptions = newVal.airPortMap;
          } else {
            this.configPortOptions = newVal.configPortMap;
          }

          this.userOptions = newVal.userMap;
          this.configShipOptions = newVal.shipOptioins;
          if (newVal.serviceCompanyMap) {
            this.serviceCompanyOptions = newVal.serviceCompanyMap;
          }

          this.currencyOptions = newVal.currencyMap || {};
          console.log("this.currencyOptions :>> ", this.currencyOptions);
        }
      },
      deep: true
      // immediate: true
    }
  },
  methods: {
    gotoNetAddress(){
      var netAddress = this.waybillData["netAddress"];
      console.log(netAddress);
      if (netAddress && netAddress != '') {
          var a = document.createElement("a");
          a.setAttribute("href", netAddress);
          a.setAttribute("target", "_blank");
          a.click();
      }
      
    },

    initParams() {
      this.airlineOptions = this.initOptionsData.airlineMap;
      this.serviceCompanyOptions = this.initOptionsData.serviceCompanyMap;
      if (["airFreightHD", "airFreight"].includes(this.pageType)) {
        this.configPortOptions = this.initOptionsData.airPortMap;
      } else {
        this.configPortOptions = this.initOptionsData.configPortMap;
      }

      this.userOptions = this.initOptionsData.userMap;
      this.configShipOptions = this.initOptionsData.shipOptioins;

      this.currencyOptions = this.initOptionsData.currencyMap;

      var constProtInfo = {};
      constProtInfo.id = this.waybillData.id;
      constProtInfo.masterNumber = this.waybillData.masterNumber;
      // constProtInfo.estimatedDepartureTime = this.waybillData.estimatedDepartureTime;
      constProtInfo.estimatedArrivalTime = this.waybillData.estimatedArrivalTime
        ? this.waybillData.estimatedArrivalTime.trim()
        : "";
      constProtInfo.serviceCompanyId = this.waybillData.serviceCompanyId;
      constProtInfo.customsClearanceAgent = this.waybillData.customsClearanceAgent;
      constProtInfo.afterSendServicer = this.waybillData.afterSendServicer;
      constProtInfo.shipmentPort = this.waybillData.shipmentPort;
      constProtInfo.departurePortInspectionTime = this.waybillData
        .departurePortInspectionTime
        ? this.waybillData.departurePortInspectionTime.trim()
        : "";
      constProtInfo.departurePortInspectionReason = this.waybillData.departurePortInspectionReason;
      constProtInfo.destinationPort = this.waybillData.destinationPort;
      constProtInfo.arrivalPortInspectionTime = this.waybillData
        .arrivalPortInspectionTime
        ? this.waybillData.arrivalPortInspectionTime.trim()
        : "";
      constProtInfo.arrivalPortInspectionReason = this.waybillData.arrivalPortInspectionReason;
      constProtInfo.transferPort = this.waybillData.transferPort;
      constProtInfo.transferPortInspectionTime = this.waybillData
        .transferPortInspectionTime
        ? this.waybillData.transferPortInspectionTime.trim()
        : "";
      constProtInfo.transferPortInspectionReason = this.waybillData.transferPortInspectionReason;
      constProtInfo.shipOrAirlineCompany = this.waybillData.shipOrAirlineCompany;
      constProtInfo.flightNumber = this.waybillData.flightNumber;
      constProtInfo.bigShip = this.waybillData.bigShip;
      constProtInfo.shipFlights = this.waybillData.shipFlights;
      constProtInfo.shipImo = this.waybillData.shipImo;
      constProtInfo.wharfName = this.waybillData.wharfName;
      constProtInfo.deliveryType = this.waybillData.deliveryType;
      constProtInfo.dutyNo = this.waybillData.dutyNo;
      constProtInfo.portOfDestinationWay = this.waybillData.portOfDestinationWay;
      constProtInfo.boardNo = this.waybillData.boardNo;
      constProtInfo.lastFreeDayTime = this.waybillData.lastFreeDayTime;
      constProtInfo.customerRemark = this.waybillData.customerRemark;
      constProtInfo.customerRemark2 = this.waybillData.customerRemark2;
      constProtInfo.estimatedDepartureTime = this.waybillData
        .estimatedDepartureTime
        ? this.waybillData.estimatedDepartureTime.trim()
        : "";
      constProtInfo.fileNo = this.waybillData.fileNo;
      this.protInfo = constProtInfo;

      //只对部分赋值
      var constChannelInfo = {};
      constChannelInfo.id = this.waybillData.id;
      constChannelInfo.countryId = this.waybillData.countryId;
      constChannelInfo.inStockChannel = this.waybillData.inStockChannel;
      constChannelInfo.isTaxFarming = this.waybillData.isTaxFarming;
      constChannelInfo.customerActualWeight = this.waybillData.customerActualWeight;
      constChannelInfo.customerVolume = this.waybillData.customerVolume;
      constChannelInfo.customerChargedWeight = this.waybillData.customerChargedWeight;
      constChannelInfo.customerTotalPackages = this.waybillData.customerTotalPackages;
      this.channelInfo = constChannelInfo;

      var constStockInfo = {};
      constStockInfo.id = this.waybillData.id;
      constStockInfo.inStockTotalPackages = this.waybillData.inStockTotalPackages;
      constStockInfo.inStockActualWeight = this.waybillData.inStockActualWeight;
      constStockInfo.inStockChargedWeight = this.waybillData.inStockChargedWeight;
      constStockInfo.inStockVolume = this.waybillData.inStockVolume;
      this.stockInfo = constStockInfo;

      var constOutStockInfo = {};
      constOutStockInfo.id = this.waybillData.id;
      constOutStockInfo.serviceTotalPackages = this.waybillData.serviceTotalPackages;
      constOutStockInfo.serviceActualWeight = this.waybillData.serviceActualWeight;
      constOutStockInfo.serviceChargedWeight = this.waybillData.serviceChargedWeight;
      constOutStockInfo.serviceVolume = this.waybillData.serviceVolume;
      constOutStockInfo.serviceVolumeWeight = this.waybillData.serviceVolumeWeight;
      constOutStockInfo.serviceUnitPrice = this.waybillData.serviceUnitPrice;
      constOutStockInfo.serviceUnitPriceCurrency = this.waybillData.serviceUnitPriceCurrency;
      this.outStockInfo = constOutStockInfo;
    },
    //语言包方法
    m(k) {
      return m(k);
    },
    //value值找pro属性名
    findKey(value, obj, compare = (a, b) => a === b) {
      return Object.keys(obj).find(k => compare(obj[k], value));
    },
    //初始化下拉
    initOptions() {
      const sources = [
        "countryReverseSource",
        "instockChannelSource",
        "seaWayDeliveryTypeSource"
      ];

      sources.forEach(bean => {
        var uri = "/api/entry/source?bean=" + bean;
        axios.post(constant.API_SERVER + uri).then(
          response => {
            if (bean === "countryReverseSource") {
              this.countryOptions = response.data;
            } else if (bean === "instockChannelSource") {
              this.stockChannelOptions = response.data;
            } else if (bean === "seaWayDeliveryTypeSource") {
              this.deliveryTypeOptions = response.data;
            }
          },
          error => {
            console.info(error);
          }
        );
      });
    },

    //修改保存渠道信息
    changeChannelInfo() {
      if (this.isChangeChannelInfo) {
        this.isChangeChannelInfo = false;
        var params = this.channelInfo;
        params["id"] = this.waybillId;
        this.updateWaybillByMap(params);
      } else {
        this.isChangeChannelInfo = true;
      }
    },
    changeOutOfStockInfo() {
      if (this.isChangeOutStockInfo) {
        this.isChangeOutStockInfo = false;
        var params = this.outStockInfo;

        params["id"] = this.waybillId;
        this.updateWaybillByMap(params);
      } else {
        this.isChangeOutStockInfo = true;
      }
    },
    changeStockInfo() {
      if (this.isChangeProtInfo) {
        this.isChangeProtInfo = false;
        var params = this.protInfo;
        params["id"] = this.waybillId;
        params["optType"] = "booking";
        params["whetherSynchronize"] = this.whetherSynchronize;
        this.updateWaybillByMap(params);
      } else {
        this.isChangeProtInfo = true;
      }
    },

    updateWaybillByMap(param) {
      ajax("updateWaybillByMap", param).then(
        res => {
          if (res.code != 200) {
            if (null != res.message) {
              this.$message.error(m(res.message));
            } else {
              this.$message.error("修改失败!");
            }
          } else {
            this.$message.success("修改成功!");
            if (
              null != param["customsClearanceAgent"] &&
              param["customsClearanceAgent"] != ""
            ) {
              var parmValue = param["customsClearanceAgent"];
              ajax("queryServiceCompanyById", { id: parmValue }).then(
                res => {
                  if (res.code != 200) {
                    this.$message.error(res.message);
                  } else {
                    if (null != res.data) {
                      const html =
                        res.data["companyNameEn"] +
                        "\n" +
                        res.data["companyAddressEn"] +
                        "\n" +
                        "TEL:" +
                        res.data["firstContactPhone"] +
                        "\n" +
                        res.data["vatNumber"];
                      this.waybillData["masterNumberReceiver"] = html;
                      this.waybillData["serachReceiver"] = parmValue;
                      this.waybillData["masterNumberAgent"] = html;
                      this.waybillData["serachAgent"] = parmValue;
                    }
                  }
                },
                error => {
                  console.log(error);
                }
              );
            }
          }
        },
        error => {
          console.log(error);
        }
      );
    },
    companyIdChange() {
      // if (
      //   this.protInfo.serviceCompanyId != null &&
      //   this.protInfo.serviceCompanyId != ""
      // ) {
      //   axios
      //     .post(
      //       constant.API_SERVER +
      //         "/api/consume/load?uri=/setting/servecompany/list&entryUri=/setting/servecompany/edit&f=get&id=" +
      //         this.protInfo.serviceCompanyId
      //     )
      //     .then(res => {
      //       let data = res.data;
      //       this.protInfo.linkMan = data.firstContact;
      //       this.protInfo.companyPhone = data.firstContactPhone;
      //     })
      //     .catch(err => {
      //       this.$message.error(err);
      //     });
      // } else {
      //   this.protInfo.linkMan = "";
      //   this.protInfo.companyPhone = "";
      // }
    }
  }
};
</script>

<style lang="scss" scoped>
.main-text {
  span {
    display: inline-block;
    color: #3f4652;
    line-height: 28px;
    font-size: 12px;
  }
}

.form-item-text {
  span {
    height: 28px;
    margin-bottom: 14px;
  }
}
</style>
